/* ./src/index.css */

/*! @import */
/* 基本样式和注册的任何基本样式 */
@tailwind base;
/* 组件类和任何组件类 */
@tailwind components;
/* 实用程序类和任何注册的实用程序类 */
@tailwind utilities;
/**
  使用此指令可控制tailwindcss向何处注入每个实用程序的响应变化。
  如果省略，默认情况下，Tailwind会将这些类附加到样式表的末尾。
*/
@tailwind screens;

/* sm (min-width: 640px) */
/* md (min-width: 768px) */
/* 仅在Chrome下有效, 因此在此screen下仅仅是模仿移动端滚动条样式 */
@screen sm {
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgb(191, 191, 191);
    border-right: 5px solid #fff;
  }
  ::-webkit-scrollbar-track {
    /* margin-left: 5px; */
  }
}

/* lg (min-width: 1024px)  */
/* xl (min-width: 1280px)  */
/* 2xl (min-width: 1536px)  */
@screen lg {
  ::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
  }
  
  /* 外层轨道 */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
    /* -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em; */
  }
  
  /* 滑块 */
  ::-webkit-scrollbar-thumb {
    /* background-color: rgba(#101F1C, 0.5); */
    background-color: #000000;
    border: 2px solid #555555;
    background-clip: padding-box;
    min-height: 5px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555555;
  }
}